<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main-wrap">
      <div class="main" :id="id">

      </div>
      <div class="legend" v-if="showLegend">
        <div class="legend-group" v-for="(item, key, index) in data" :key="index">
          <div class="legend-item">
            <div class="icon" :style="{backgroundColor: inColor[index]}"></div>
            <div class="name" :style="{color: inColor[index]}">{{key}}</div>
            <div>/ {{dataMap[key].value}}%</div>
          </div>
          <div class="legend-item legend-item-child" v-for="(child, count) in item.children" :key="`child-${count}`">
            <div class="icon" :style="{backgroundColor: outColor[count + item.children.length * index]}"></div>
            <div class="name" :style="{color: outColor[count + item.children.length * index]}">{{child.name}}</div>
            <div>/ {{dataMap[key + child.name].value}}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
  export default {
    components: {
      chartTitle
    },
    name: 'chart-group-pie',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      inColor: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#FF6600']
        }
      },
      outColor: {
        type: Array,
        default: () => {
          return ['#A3D804', '#269A99', '#5B8FF9', '#FF9D4D', '#F34139', '#FFCC00']
        }
      },
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        minAngle: 45,
        center: ['28%', '50%'],
        inPieTotal: 100,
        OutPieTotal: 100,
        showLegend: false
        // dataMap: {}
      }
    },
    computed: {
      id: function() {
        return `main-${Math.random()}`
      },
      dataMap: function() {
        let obj = {}
        let inPieTotal = 0
        let outPieTotal = 0
        // 先计算总数
        // 内圆
        Object.keys(this.data).forEach((key, index) => {
          inPieTotal += this.data[key].total || 0
          // 外圆
          this.data[key].children.map(item => {
            outPieTotal += item.value || 0
          })
        })
        // 计算每个值的百分比
        Object.keys(this.data).forEach((key, index) => {
          obj[key] = {
            value: 0,
            color: this.inColor[index]
          }
          if (inPieTotal !== 0) {
            obj[key].value = (this.data[key].total / inPieTotal * 100).toFixed(2)
          }
          // 设置外圆
          this.data[key].children.map((item, count) => {
            // outColor[count + item.children.length * index]
            const nameKey = key + item.name
            obj[nameKey] = {
              value: 0,
              color: this.outColor[count + this.data[key].children.length * index]
            }
            if (outPieTotal !== 0) {
              obj[nameKey].value = (item.value / outPieTotal * 100).toFixed(2)
            }
          })
        })
        return obj
      }
    },
    mounted() {
      setTimeout(() => {
        this.onInit()
      }, 3500)
    },
    updated() {
      setTimeout(() => {
        this.onInit()
      }, 1000)
    },
    methods: {
      onInit() {
        this.showLegend = true
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;



        const inPie = {
          // name: '整体分类',
          type: 'pie',
          radius: [0, '35%'],
          center: this.center,
          minAngle: 0,
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: (params) => {
                return this.inColor[params.dataIndex];
              },
            },
          },

          selectedMode: 'single',
          data: [],
        }
        const outPie = {
          type: 'pie',
          radius: ['60%', '45%'],
          center: this.center,
          minAngle: 0,
          itemStyle: {
            normal: {
              color: (params) => {
                return this.dataMap[params.data.mapKey].color;
              },
            },
          },
          label: {
            show: false
          },
          data: [],
        }
        let inPieTotal = 0
        let OutPieTotal = 0
        // 配置option
        Object.keys(this.data).forEach((key, index) => {
          // 设置内圆
          inPie.data.push({
            name: key,
            value: this.data[key].total,
            mapKey: key
          })
          inPieTotal += this.data[key].total
          // 设置外圆
          this.data[key].children.map(item => {
            let obj = {
              name: item.name,
              value: item.value,
              type: item.name,
              mapKey: key + item.name
            }
            OutPieTotal += item.value
            outPie.data.push(obj)
          })
        })

        option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
          tooltip: {
            formatter: (param) => {
              return param.data.name + ': ' + this.dataMap[param.data.mapKey].value + '%';
            },
          },
          legend: {
            show: false,
            orient: 'vertical',
            top: 'center',
            // type: 'scroll',
            left: '36%',
            itemGap: autoSize(26),
            pageTextStyle: {
              color: '#fff'
            },
            textStyle: {
              fontSize: autoSize(14),
              // color: '#',
              rich: {
                a: {
                  fontSize: autoSize(14),
                  color: '#',
                },
                value: {
                  fontSize: autoSize(14),
                  color: '#fff'
                }
              },
            },
            itemWidth: 13,
            itemHeight: 13,
            icon: 'roundRect',
            formatter: params => {
              // return `{a|${params}}{value| / ${ratio || 0}%}`
              return `{a|${params}}{value| / ${this.dataMap[params]}%}`
            },
          },

          series: [
            // 圆心
            {
              radius: ['0', '12%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              // minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              z: 5,
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 30
              },
              data: [{
                value: 0
              }],
            },
            // 圆心外圈
            {
              radius: ['20%', '19%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              // minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
            // 外圈
            {
              radius: ['70%', '69%'],
              center: this.center,
              type: 'pie',
              // minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                color: '#00CBFF',
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
            inPie,
            outPie,
          ],
        };
        myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }

  #container {
    width: 100%;
    height: 30.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    // border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main-wrap {
      flex: 1;
      position: relative;

      .main {
        width: 100%;
        height: 100%;
      }

      .legend {
        width: 50%;
        height: 100%;
        // background-color: #fff;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-left: 3%;
        gap: 1.3885vh;

        .legend-group {
          display: flex;
          flex-wrap: wrap;
        }
        .legend-item-child{
          font-size: 1.111111vh!important;
        }
        .legend-item {
          font-family: "microsoft yahei";
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          margin-right: 0.926vh;
          font-size: 1.2962vh;

          &:first-child {
            width: 100%;
          }

          .icon {
            width: 1.2962vh;
            height: 1.2962vh;
            border-radius: 4px;
            margin-right: 8px;
          }

          .name {
            margin-right: 4px;
          }
        }
      }
    }
  }
</style>
